<template>
  <el-row class="tac">
    <el-col :span="5" class="left-container">
      <ul v-for="menu in usermenu" :key="menu.name" class="containerUl">
        <li @mouseover="menu.hover = true" @mouseout="menu.hover = false" @click="fun(menu.name)" :class="{ containerLl: true, active: selectedItem === menu.name || menu.hover }">{{ menu.name }}</li>
      </ul>
    </el-col>
    <el-col :span="19" class="right-container">
      <!-- 基本信息 -->
      <div v-show="showtable == 1" class="userinfo">
        <el-form ref="userInfoformRef" :rules="userInfoRules" :model="UsreInfoForm" hide-required-asterisk="true" label-width="120px" style="width:400px;">
          <el-form-item>
            <div class="avatar">
              <img src="./img/head-L.png" alt="">
            </div>
          </el-form-item>
          <el-form-item label="账户名称">
            <el-input v-model="UsreInfoForm.AccountName" disabled />
          </el-form-item>
          <el-form-item label="用户姓名" prop="UserName">
            <el-input v-model="UsreInfoForm.UserName" placeholder="请输入用户姓名" ref="UserName" clearable="true" @focus="handlebasicFocus" />
          </el-form-item>
          <el-form-item label="手机号码" prop="UserMobile">
            <el-input v-model="UsreInfoForm.UserMobile" placeholder="012345678910" ref="UserMobile" clearable="true" @focus="handlebasicFocus" />
          </el-form-item>
          <el-form-item label="邮箱地址" prop="UserEmail">
            <el-input v-model="UsreInfoForm.UserEmail" placeholder="例:admin@xian-jian.com" ref="UserEmail" clearable="true" @focus="handlebasicFocus" />
          </el-form-item>
          <div class="btn" v-if="showbasicbtn">
            <el-button @click="userinfoCancel">取消</el-button>
            <el-button class="confirm" @click="userinfoConfirm">确定</el-button>
          </div>
        </el-form>

      </div>
      <div v-show="showtable == 2" class="userinfo marg10">
        <el-form ref="passwordformRef" :rules="passwordRules" :model="PasswordForm" label-width="120px" style="width:400px;">
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input v-model="PasswordForm.oldPassword" show-password type="password" placeholder="请输入旧密码" ref="oldPassword" @focus="handlePasswordFocus" clearable />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="PasswordForm.newPassword" type="password" placeholder="请输入新密码" ref="newPassword" @focus="handlePasswordFocus" clearable />
          </el-form-item>
          <el-form-item label="确认密码" prop="againNewPassword">
            <el-input v-model="PasswordForm.againNewPassword" type="password" placeholder="请再次输入新密码" ref="againNewPassword" @focus="handlePasswordFocus" clearable />
          </el-form-item>
          <el-form-item>
            <span class="changepasswordDesc"> {{ passwordDesc }}</span>
          </el-form-item>

          <div class="btn" v-if="showpasswordbtn">
            <el-button @click="passwordCancel">取消</el-button>
            <el-button class="confirm" @click="passwordConfirm">确定</el-button>
          </div>
        </el-form>

      </div>
      <div v-show="showtable == 3" class="showSubMenu3">
        <el-table :data="userTable" :header-cell-style="{ color: '#595959' }"
          :class="{ editAddform: showEditform == true || showAddform == true, addform: showEditform == false || showAddform == true }">
          <el-table-column prop="AccountName" label="账号名称" width="100" align="center" />
          <el-table-column label="账号状态" align="center">
            <template #default="{ row }">
              <el-switch v-model="row.DataStatus" @click="handleSwitchChange(row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="UserName" label="用户姓名" align="center" />
          <el-table-column prop="UserGradeName" label="账号级别" align="center" />
          <el-table-column prop="UserMobile" label="手机号码" align="center" />
          <el-table-column fixed="right" label="操作" align="center">
            <template #default="{ row }">
              <template v-if="row.editing">
                <el-button class="btnActive btnActiveACT" @click="handlersave(row)" type="text">保存</el-button>
                <span class="divider">|</span>
                <el-button class="btnActive btnActiveACT" @click="handlercancel(row)" type="text">取消</el-button>
              </template>
              <template v-else>
                <el-button class="btnActive" @click="handlerEdit(row)" type="text">编辑</el-button>
                <span class="divider">|</span>
                <el-popconfirm size="medium" confirm-button-text="确定" cancel-button-text="取消" :icon="info" title="您确定要删除吗?" @confirm="confirmEvent()" @cancel="cancelEvent">
                  <template #reference>
                    <el-button class="btnActive" type="text" @click="deleteUserName(row)">删除</el-button>
                  </template>
                </el-popconfirm>



              </template>
            </template>
          </el-table-column>
        </el-table>

        <!-- 编辑用户的表单 -->
        <div v-show="showEditform" class="adduser">
          <el-form :inline="true" ref="editUserRef" :rules="editUserRules" :model="editUserform" label-width="80px" class="demo-form-inline" require-asterisk-position="right">
            <el-row>
              <el-col :span="12">
                <el-form-item label="账号名称" prop="AccountName">
                  <el-input v-model="editUserform.AccountName" ref="AccountName" placeholder="请输入" style="width: 300px;" disabled />
                </el-form-item>
                <el-form-item label="登录密码" prop="AccountPwd">
                  <el-input show-password type="password" v-model="editUserform.AccountPwd" ref="AccountPwd" placeholder="不修改密码请留空" clearable style="width: 300px;" />
                </el-form-item>
                <el-form-item label="邮箱地址" prop="UserEmail">
                  <el-input v-model="editUserform.UserEmail" ref="UserEmail" placeholder="请输入" clearable style="width: 300px;" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户姓名" prop="UserName">
                  <el-input v-model="editUserform.UserName" ref="UserName" placeholder="请输入" clearable style="width: 300px;" />
                </el-form-item>
                <el-form-item label="手机号码" prop="UserMobile">
                  <el-input v-model="editUserform.UserMobile" ref="UserMobile" placeholder="请输入" clearable style="width: 300px;" />
                </el-form-item>
                <el-form-item label="账户权限" prop="UserGrade">
                  <el-select v-model="editUserform.UserGrade" ref="UserGrade" placeholder="请选择" clearable style="width: 300px;">
                    <el-option label="普通用户" value="1" />
                    <el-option label="系统管理员" value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!-- 添加用户的表单 -->
        <div v-show="showAddform" class="adduser">
          <el-form :inline="true" ref="addUserRef" :rules="addUserRules" :model="addUserform" label-width="80px" class="demo-form-inline" require-asterisk-position="right">
            <el-row>
              <el-col :span="12">
                <el-form-item label="账号名称" prop="AccountName">
                  <el-input v-model="addUserform.AccountName" ref="AccountName" placeholder="请输入" clearable style="width: 300px;" />
                </el-form-item>
                <el-form-item label="登录密码" prop="AccountPwd">
                  <el-input show-password type="password" v-model="addUserform.AccountPwd" ref="AccountPwd" placeholder="请输入" clearable style="width: 300px;" />
                </el-form-item>
                <el-form-item label="邮箱地址" prop="UserEmail">
                  <el-input v-model="addUserform.UserEmail" ref="UserEmail" placeholder="请输入" clearable style="width: 300px;" />
                </el-form-item>
                <el-form-item label="账户权限" prop="UserGrade">
                  <el-select v-model="addUserform.UserGrade" ref="UserGrade" placeholder="请选择" clearable style="width: 300px;">
                    <el-option label="普通用户" value="1" />
                    <el-option label="系统管理员" value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户姓名" prop="UserName">
                  <el-input v-model="addUserform.UserName" ref="UserName" placeholder="请输入" clearable style="width: 300px;" />
                </el-form-item>
                <el-form-item label="确认密码" prop="againNewAccountPwd">
                  <el-input show-password type="password" v-model="addUserform.againNewAccountPwd" ref="againNewAccountPwd" placeholder="请再次输入" clearable style="width: 300px;" />
                </el-form-item>
                <el-form-item label="手机号码" prop="UserMobile">
                  <el-input v-model="addUserform.UserMobile" ref="UserMobile" placeholder="请输入" clearable style="width: 300px;" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="tbn2">
            <el-button class="btn2-child" size="default" @click="handlerUsercancel" v-if="addshowBtn">取消</el-button>
            <el-button class="btn2-child btn2-child2" size="default" @click="handlerUserAdd" v-if="addshowBtn">保存</el-button>
          </div>
        </div>
        <!-- 添加按钮 -->
        <div class="tbn1">
          <el-button class="add" size="default" @click="handlerAdd" v-if="showBtn == 1"><span style="font-size:25px;margin-right:5px">+ </span> 添加</el-button>
        </div>
      </div>
    </el-col>

  </el-row>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useUserInfoStore } from "@/stores/userInfo";//相关的小仓库
import { reqExtist } from '@/api/userinfo/userDialog';
// 引入icon组件
import info from "./info.vue"
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  CloseBold,
  SemiSelect,
  Close,
  Plus
} from '@element-plus/icons-vue'

import type { Action } from "element-plus";
import { ElMessage, ElMessageBox } from 'element-plus'
const userInfoStore = useUserInfoStore();// 获取小仓库
const deleteBoxVisibleVisible = ref(false)
// 定义点击删除按钮时那一列的名字
const deleteName = ref("")
// 控制添加用户的字段
const showBtn = ref(1)
const editMode = ref('');
// 控制添加用户的时候添加与取消按钮的展示
const addshowBtn = ref(false)
// 编辑模式的表单展示
const showEditform = ref(false)
// 添加模式的表单展示
const showAddform = ref(false)
//获取el-form组件实例的VC,调用validate方法确保校验通过
const userInfoformRef = ref<any>();
const passwordformRef = ref<any>();
const addUserRef = ref<any>();
const editUserRef = ref<any>();
// 定义修改密码请求返回来的错误描述
const passwordDesc = ref<any>()
// 在未触发用户姓名、手机号码、邮箱地址的修改动作时，下方的“取消“和”确定“两个按钮默认不显示，仅存在修改内容时方显示；
const showbasicbtn = ref(false)
const showpasswordbtn = ref(false)
// 仓库拿回来的用户信息
const UsrebasicInfo = ref<any>({})

const userTable = ref<any>([])
// 定义基本信息表单信息
const UsreInfoForm = ref({
})
// 定义修改密码表单信息
const PasswordForm = ref<any>({
  oldPassword: '',  //旧密码
  newPassword: '',  //新密码
  againNewPassword: ''  //再次确认密码
})
// 添加用户
const addUserform = ref<any>({
  AccountName: '',
  AccountPwd: '',
  againNewAccountPwd: '',
  UserName: '',
  UserEmail: '',
  UserGrade: '普通用户',
  UserMobile: '',
})
// 编辑用户
const editUserform = ref<any>({
  AccountName: null,
  AccountPwd: null,
  UserName: null,
  UserEmail: null,
  UserGrade: '普通用户',
  UserMobile: null,
})
onMounted(async () => {
  await userInfoStore.usersinfo()
  getsessionStorage()
  gettableData()
})
onBeforeUnmount(() => {
})

const gettableData = () => {
  const tableData = ref(computed(() => userInfoStore.$state.usersInfo))
  const tableTotalData = tableData && tableData?.value.map((item: any) => {
    return {
      ...item,
      editing: false,
      DataStatus: item.DataStatus === 1 ? true : false
    }
  })
  userTable.value = tableTotalData
}


// 取消所有行的编辑状态
const cancelEditing = () => {
  userTable.value.forEach((row: any) => {
    row.editing = false;
  });
};

// 正则
const accountName = /^[a-zA-Z]{1}([a-zA-Z0-9]){4,15}$/
const chineseNameRegex = /((^[\u4E00-\u9FA5]{2,16})|(^[a-zA-Z\s]{3,64}))$/;
const regUserMobile = /^(13|14|15|16|17|18|19)[0-9]{9}$/;
const regUserEmail = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
const regPassword = /^[a-zA-Z]{1}(.){7,31}$/;  //密码       由英文、数字、标点符号组成，且必须英文字母开头，范围在 8-32 个内
// 控制右侧展示的内容
const showtable = ref(1)

// 定义左侧菜单栏
const usermenu = ref([{
  name: '基本信息', hover: false
}, {
  name: '修改密码', hover: false
}, {
  name: '账户管理', hover: false
}])

// 保存当前高亮的li的name
const selectedItem = ref('基本信息')


//  从本地存储拿数据
const getsessionStorage = () => {
  const UserInfoJSON: any = localStorage.getItem("UserInfo");
  UsrebasicInfo.value = JSON.parse(UserInfoJSON);// 转化为JSON.parse
  UsreInfoForm.value = UsrebasicInfo.value
}



/*--------------------------鼠标hover事件----------------------------------*/



/*--------------------------点击事件----------------------------------*/
// 点击左侧导航的事件
const fun = (msg: any) => {
  switch (msg) {
    case '基本信息':
      selectedItem.value = msg
      showtable.value = 1;
      break;
    case '修改密码':
      selectedItem.value = msg
      showtable.value = 2;
      break;
    default:
      selectedItem.value = msg
      showtable.value = 3;
      break
  }
}

// 父组件点击关闭dialog时该组件触发的事件
const childFun = () => {
  // 右侧信息展示
  showtable.value = 1
  // 左侧导航栏展示
  selectedItem.value = '基本信息'
  // 文本框聚焦时候显示的按钮
  showpasswordbtn.value = false
  showbasicbtn.value = false
  // 基本信息界面清空
  getsessionStorage()
  // 修改密码界面清空
  PasswordForm.value.oldPassword = ''
  PasswordForm.value.newPassword = ''
  PasswordForm.value.againNewPassword = ''
  passwordformRef.value?.clearValidate();
  // 添加用户界面清空
  showBtn.value = 1
  addUserform.value.AccountName = ''
  addUserform.value.AccountPwd = ''
  addUserform.value.againNewAccountPwd = ''
  addUserform.value.UserName = ''
  addUserform.value.UserEmail = ''
  addUserform.value.UserGrade = ''
  addUserform.value.UserMobile = ''
}

const deleteUserName = (row: any) => {
  deleteName.value = row.AccountName
}
const confirmEvent = async () => {
  deleteBoxVisibleVisible.value = false
  try {
    await userInfoStore.deleteUsers(deleteName.value)
    const StsteInfo = ref<any>(computed(() => userInfoStore.$state.deleteInfo))
    if (StsteInfo.value.AffectedRows == -1) {
      ElMessage.error(`${StsteInfo.value.Desc}`)
      return
    }
    ElMessage.success('删除成功')
    //  重新获取所有用户
    await userInfoStore.usersinfo()
    gettableData()
  } catch (error) {
    ElMessage.warning('删除失败')
  }
}

/*-----------------基本信息-----------------*/
// 表单聚焦状态显示按钮
const handlebasicFocus = () => {
  showbasicbtn.value = true
}
// 点击基本信息中的'取消'按钮
const userinfoCancel = () => {
  getsessionStorage()
  userInfoformRef.value?.clearValidate();
}
//点击基本信息中的'确定'按钮
const userinfoConfirm = async () => {
  await userInfoformRef.value?.validate();
  const data = {
    UserGrade: UsreInfoForm.value.UserGrade,
    AccountName: UsreInfoForm.value.AccountName,
    UserName: UsreInfoForm.value.UserName,
    UserMobile: UsreInfoForm.value.UserMobile,
    UserEmail: UsreInfoForm.value.UserEmail
  }
  try {
    await getUpdata(data)// 如果校验通过，就发请求
    // sessionStorage.setItem("UserInfo",)
    //  重新获取所有用户
    await userInfoStore.usersinfo()
    ElMessage.success('个人信息修改成功')
    // 重新从仓库拿表格数据
    gettableData()
    showbasicbtn.value = false
  } finally {

    // setTimeout(() => {  //如果校验未通过，在三秒后清除校验提示，并且将还原之前的值
    //   userInfoformRef.value?.clearValidate();
    //   UsreInfoForm.value.UserMobile = UsrebasicInfo.UserMobile
    //   UsreInfoForm.value.UserEmail = UsrebasicInfo.UserEmail
    //   UsreInfoForm.value.UserName = UsrebasicInfo.UserName
    // }, 3000);
  }
}

/*-----------------修改密码-----------------*/
// 表单聚焦状态显示按钮
const handlePasswordFocus = () => {
  showpasswordbtn.value = true
}
// 点击修改密码中的'取消'按钮
const passwordCancel = () => {
  PasswordForm.value.oldPassword = ''
  PasswordForm.value.newPassword = ''
  PasswordForm.value.againNewPassword = ''
  passwordformRef.value?.clearValidate();
}
//点击修改密码中的'确定'按钮
const passwordConfirm = async () => {
  await passwordformRef.value?.validate();
  ElMessageBox.alert('确定要修改用户密码？', '修改密码', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: 'OK',
    callback: async (action: Action) => {
      console.log(action);
      if (action == 'cancel') return;

      await getPassword()
      const desc = (computed(() => userInfoStore.$state.changePasswordDesc))
      if (desc.value == null) {
        // ElMessage({
        //   type: 'success',
        //   message: `修改成功`,
        // })
        //  重新获取所有用户
        await userInfoStore.usersinfo()
        // 重新从仓库拿表格数据
        gettableData()
        showpasswordbtn.value = false
      } else {
        passwordDesc.value = desc.value
        setTimeout(() => {
          passwordDesc.value = ""
        }, 3000)
      }
    },

  })
}
/*-----------------账户管理-----------------*/
// 点击账号管理中的'编辑'按钮
const handlerEdit = async (row: any) => {
  showAddform.value = false
  cancelEditing()
  row.editing = true
  // // 编辑用户的表单出现
  showEditform.value = true
  editMode.value = row.AccountName;
  showBtn.value = 2
  editUserform.value.AccountName = row.AccountName
  editUserform.value.UserName = row.UserName
  editUserform.value.UserEmail = row.UserEmail
  editUserform.value.UserGrade = row.UserGrade == '2' ? '系统管理员' : '普通用户'
  editUserform.value.UserMobile = row.UserMobile
}

// 点击操作中的保存按钮
const handlersave = async (row: any) => {
  row.editing = false
  // 展示添加用户的添加按钮
  showBtn.value = 1
  // 隐藏编辑用户的表单
  showEditform.value = false
  try {
    await editUserRef.value?.validate();
    const data = {
      UserGrade: editUserform.value.UserGrade == '系统管理员' ? 2 : 1,
      AccountName: editUserform.value.AccountName ? editUserform.value.AccountName : null,
      UserName: editUserform.value.UserName ? editUserform.value.UserName : null,
      UserMobile: editUserform.value.UserMobile ? editUserform.value.UserMobile : null,
      UserEmail: editUserform.value.UserEmail ? editUserform.value.UserEmail : null,
      AccountPwd: editUserform.value.AccountPwd ? editUserform.value.AccountPwd : null
    }
    // 发送修改用户信息请求
    await getUpdata(data)
    // 重新获取用户信息
    await userInfoStore.usersinfo()
    // 重新从仓库拿表格数据
    gettableData()
    ElMessage.success('修改成功')
  } catch (error) {
    ElMessage.warning('修改失败')
  }
}
// 点击操作中的取消按钮
const handlercancel = (row: any) => {
  row.editing = false;
  // 展示添加用户的添加按钮
  showBtn.value = 1
  // 隐藏编辑用户的表单
  showEditform.value = false
  ElMessage.warning('取消修改')
}

const cancelEvent = () => {
  deleteBoxVisibleVisible.value = false
}

// 点击账号管理中的添加用户的添加按钮
const handlerAdd = () => {
  // 展示添加用户确认信息的添加
  addshowBtn.value = true
  //展示表单
  showAddform.value = true
  // 隐藏添加用户的添加按钮
  showBtn.value = 2
  addUserRef.value?.clearValidate();
  addUserform.value.AccountName = ''
  addUserform.value.againNewAccountPwd = ''
  addUserform.value.AccountPwd = ''
  addUserform.value.UserName = ''
  addUserform.value.UserEmail = ''
  addUserform.value.UserGrade == '2' ? '系统管理员' : '普通用户'
  addUserform.value.UserMobile = ''
}

// 点击账号管理中的添加用户的’确认添加‘按钮
const handlerUserAdd = async () => {
  // 如果校验未通过，就不发请求
  await addUserRef.value?.validate();
  // 展示添加用户确认信息的添加
  addshowBtn.value = false
  // 显示添加用户的添加按钮
  showBtn.value = 1
  //隐藏添加的表单
  showAddform.value = false
  // 需要查看是否存在当前账号
  let res = await reqExtist(addUserform.value.AccountName)
  if (res == true) {
    ElMessage.error(`${addUserform.value.AccountName} + 账号已经存在，无法重复添加`,)
    return
  } else {

    try {
      // 添加用户
      await addUser()
      //  重新获取所有用户
      await userInfoStore.usersinfo()
      ElMessage.success(`${addUserform.value.AccountName}  账号添加成功`,)
    } catch (error) {
      ElMessage.error(`${addUserform.value.AccountName}  账号添加失败`,)
    }
  }
}
// 点击账号管理中的添加用户的’取消添加‘按钮
const handlerUsercancel = async () => {
  // 展示添加用户确认信息的添加
  addshowBtn.value = false
  // 显示添加用户的添加按钮
  showBtn.value = 1
  //隐藏添加的表单
  showAddform.value = false
  addUserform.value.AccountName = ''
  addUserform.value.againNewAccountPwd = ''
  addUserform.value.AccountPwd = ''
  addUserform.value.UserName = ''
  addUserform.value.UserEmail = ''
  addUserform.value.UserGrade = ''
  addUserform.value.UserMobile = ''
}

// 点击开关更新用户信息
const handleSwitchChange = async (row: any) => {
  // 在此处理开关状态的改变
  const data = {
    AccountName: row.AccountName,
    DataStatus: row.DataStatus == true ? 1 : 2
  }
  try {
    // 发送修改用户信息请求
    await getUpdata(data)
    const StsteInfo = ref<any>(computed(() => userInfoStore.$state.statesObj))
    if (StsteInfo.value.AffectedRows == -1) {
      ElMessage.error(`${StsteInfo.value.Desc}`)
      // 重新获取用户信息的请求
      await userInfoStore.usersinfo()
      // 重新获取用户数据
      gettableData()
      return
    }
    // 重新获取用户信息
    await userInfoStore.usersinfo()
    gettableData()
    ElMessage.success('用户状态修改成功')
  } catch (error) {
    ElMessage.success('用户状态修改失败')
  }

}


/*--------------------------请求函数----------------------------------*/
//基本信息 更新用户信息的请求函数
const getUpdata = async (data: any) => {

  await userInfoStore.updateUserinfo(data);
  // localStorage.setItem("UserInfo", JSON.stringify(data))
}
// 修改密码  请求函数
const getPassword = async () => {
  const data = {
    AccountName: UsreInfoForm.value.AccountName,
    AccountPwd: PasswordForm.value.oldPassword,
    AccountNewPwd: PasswordForm.value.newPassword,
    AccountConfirmPwd: PasswordForm.value.againNewPassword
  }
  await userInfoStore.changePass(data);
}
// 添加用户  功能函数
const addUser = async () => {
  const data = {
    AccountName: addUserform.value.AccountName,
    AccountPwd: addUserform.value.AccountPwd,
    AccountConfirmPwd: addUserform.value.againNewAccountPwd,
    UserName: addUserform.value.UserName,
    UserEmail: addUserform.value.UserEmail,
    UserGrade: addUserform.value.UserGrade,
    UserMobile: addUserform.value.UserMobile,
  }
  await userInfoStore.addUserinfo(data);
}


/*--------------------------自定义校验规则----------------------------------*/
/*------基本信息   自定义校验规则--------*/
//自定义校验规则:用户姓名规则---->只要文本发生变化就会触发次函数
const basicsvalidateUserName = (rule: any, value: any, callback: any) => {
  if (value) {
    if (chineseNameRegex.test(value)) {
      //用户姓名必须由2-16个纯中文，或3-64个纯英文组成正常放行
      callback();
    } else {
      callback(new Error("用户姓名必须由2-16个纯中文，或3-64个纯英文组成"));
    }
  } else {
    callback(new Error("请输入用户姓名"));
  }
};
//自定义校验规则:手机号码规则---->只要文本发生变化就会触发次函数
const basicsvalidateUserMobile = (rule: any, value: any, callback: any) => {
  if (regUserMobile.test(value)) {
    callback();   //通过，直接调用回调函数
  } else {
    callback(new Error("请输入合法的手机号码"))  //不通过，调用回调函数时，必须提供一个Error对象，表示提示失败信息
  }
};
//自定义校验规则:邮箱地址规则---->只要文本发生变化就会触发次函数
const basicsvalidateUserEmail = (rule: any, value: any, callback: any) => {
  if (regUserEmail.test(value)) {
    callback();//通过，直接调用回调函数
  } else {
    callback(new Error("请输入正确的邮箱地址"))  //不通过，调用回调函数时，必须提供一个Error对象，表示提示失败信息
  }
};

/*------修改密码  自定义校验规则--------*/
//自定义校验规则:账号密码规则---->只要文本发生变化就会触发次函数
const changevalidatePassword = (rule: any, value: any, callback: any) => {
  if (value) {
    if (regPassword.test(value)) {
      callback();//通过，直接调用回调函数
    } else {
      callback(new Error("账号密码必须由英文、数字、标点符号组成，且必须英文字母开头，范围在 8-32 个内"))  //不通过，调用回调函数时，必须提供一个Error对象，表示提示失败信息
    }
  } else {
    callback(new Error("请输入账号密码"))
  }


};
//自定义校验规则:修改密码界面确认密码规则---->只要文本发生变化就会触发次函数
const changevalidateAgainPassword = (rule: any, value: any, callback: any) => {
  if (value == PasswordForm.value.newPassword) {
    callback();//通过，直接调用回调函数
  } else {
    callback(new Error("两次输入密码不一致"))  //不通过，调用回调函数时，必须提供一个Error对象，表示提示失败信息
  }
};

/*------账户管理  自定义校验规则--------*/
//编辑用户信息
//自定义校验规则:用户姓名规则---->只要文本发生变化就会触发次函数
const editvalidateNickName = (rule: any, value: any, callback: any) => {
  if (value) {
    if (accountName.test(value)) {
      //账号名称必须由英文或数字组成，且必须英文字母开头，范围在 5-16 个内。
      callback();
    } else {
      callback(new Error("账号名称必须由英文或数字组成，且必须英文字母开头，范围在 5-16 个内。"));
    }
  } else {
    callback(new Error("请输入用户姓名"));
  }
};
//自定义校验规则:账号密码规则---->只要文本发生变化就会触发次函数
const editvalidatePassword = (rule: any, value: any, callback: any) => {
  if (regPassword.test(value) || value == '' || value == null) {
    callback();//通过，直接调用回调函数
  } else {
    callback(new Error("账号密码必须由英文、数字、标点符号组成，且必须英文字母开头，范围在 8-32 个内"))  //不通过，调用回调函数时，必须提供一个Error对象，表示提示失败信息
  }

};
//自定义校验规则:用户姓名规则---->只要文本发生变化就会触发次函数
const editvalidateUserName = (rule: any, value: any, callback: any) => {
  if (chineseNameRegex.test(value) || value == '') {
    //用户姓名必须由2-16个纯中文，或3-64个纯英文组成正常放行
    callback();
  } else {
    callback(new Error("用户姓名必须由2-16个纯中文，或3-64个纯英文组成"));
  }
};
//自定义校验规则:邮箱地址规则---->只要文本发生变化就会触发次函数
const editvalidateUserEmail = (rule: any, value: any, callback: any) => {
  if (regUserEmail.test(value) || value == '') {
    callback();//通过，直接调用回调函数
  } else {
    callback(new Error("请输入正确的邮箱地址"))  //不通过，调用回调函数时，必须提供一个Error对象，表示提示失败信息
  }
};
//自定义校验规则:手机号码规则---->只要文本发生变化就会触发次函数
const editvalidateUserMobile = (rule: any, value: any, callback: any) => {
  if (regUserMobile.test(value) || value == '') {
    callback();   //通过，直接调用回调函数
  } else {
    callback(new Error("请输入合法的手机号码"))  //不通过，调用回调函数时，必须提供一个Error对象，表示提示失败信息
  }
};

// 添加新用户
//自定义校验规则:账号名称规则---->只要文本发生变化就会触发次函数
const validateNickName = (rule: any, value: any, callback: any) => {
  if (value) {
    if (accountName.test(value)) {
      //账号名称必须由英文或数字组成，且必须英文字母开头，范围在 5-16 个内。
      callback();
    } else {
      callback(new Error("账号名称必须由英文或数字组成，且必须英文字母开头，范围在 5-16 个内。"));
    }
  } else {
    callback(new Error("请输入账号名称"));
  }
};
//自定义校验规则:账号密码规则---->只要文本发生变化就会触发次函数
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value) {
    if (regPassword.test(value)) {
      callback();//通过，直接调用回调函数
    } else {
      callback(new Error("账号密码必须由英文、数字、标点符号组成，且必须英文字母开头，范围在 8-32 个内"))  //不通过，调用回调函数时，必须提供一个Error对象，表示提示失败信息
    }
  } else {
    callback(new Error("请输入账号密码"))
  }


};
//自定义校验规则:用户姓名规则---->只要文本发生变化就会触发次函数
const validateUserName = (rule: any, value: any, callback: any) => {
  if (value) {
    if (chineseNameRegex.test(value)) {
      //用户姓名必须由2-16个纯中文，或3-64个纯英文组成正常放行
      callback();
    } else {
      callback(new Error("用户姓名必须由2-16个纯中文，或3-64个纯英文组成"));
    }
  } else {
    callback(new Error("请输入用户姓名"));
  }
};
//自定义校验规则:添加用户界面确认密码规则---->只要文本发生变化就会触发次函数
const againNewvalidateUserName = (rule: any, value: any, callback: any) => {
  if (value) {
    if (value == addUserform.value.AccountPwd) {
      callback();//通过，直接调用回调函数
    } else {
      callback(new Error("两次输入密码不一致"))  //不通过，调用回调函数时，必须提供一个Error对象，表示提示失败信息
    }
  } else {
    callback(new Error("请再次输入密码"))
  }
};
//自定义校验规则:邮箱地址规则---->只要文本发生变化就会触发次函数
const validateUserEmail = (rule: any, value: any, callback: any) => {
  if (value) {
    if (regUserEmail.test(value)) {
      callback();//通过，直接调用回调函数
    } else {
      callback(new Error("请输入正确的邮箱地址"))  //不通过，调用回调函数时，必须提供一个Error对象，表示提示失败信息
    }
  } else {
    callback(new Error("请输入邮箱地址"));
  }
};
//自定义校验规则:手机号码规则---->只要文本发生变化就会触发次函数
const validateUserMobile = (rule: any, value: any, callback: any) => {

  if (regUserMobile.test(value) || value == '') {
    callback();   //通过，直接调用回调函数
  } else {
    callback(new Error("请输入合法的手机号码"))  //不通过，调用回调函数时，必须提供一个Error对象，表示提示失败信息
  }

};
//自定义校验规则:添加用户界面用户权限规则---->只要文本发生变化就会触发次函数
const validateUserGrade = (rule: any, value: any, callback: any) => {
  if (value !== '') {
    callback();//通过，直接调用回调函数
  } else {
    callback(new Error("请选择用户权限"));

  }
};



// 基本信息的校验
const userInfoRules = {
  UserName: [{ required: true, validator: basicsvalidateUserName, trigger: "change" },],
  UserMobile: [{ required: true, validator: basicsvalidateUserMobile, trigger: "change" },],
  UserEmail: [{ required: true, validator: basicsvalidateUserEmail, trigger: "change" },],
}
// 修改密码的校验
const passwordRules = {
  oldPassword: [{ required: true, validator: changevalidatePassword, trigger: "change" },],
  newPassword: [{ required: true, validator: changevalidatePassword, trigger: "change" },],
  againNewPassword: [{ required: true, validator: changevalidateAgainPassword, trigger: "change" },],
}
// 编辑用户的校验
const editUserRules = {
  AccountName: [{ required: true, validator: editvalidateNickName, trigger: "change" },],
  AccountPwd: [{ required: false, validator: editvalidatePassword, trigger: "change" },],
  UserName: [{ required: false, validator: editvalidateUserName, trigger: "change" },],
  UserEmail: [{ required: false, validator: editvalidateUserEmail, trigger: "change" },],
  UserMobile: [{ required: false, validator: editvalidateUserMobile, trigger: "change" },]
}
// 添加用户的校验
const addUserRules = {
  AccountName: [{ required: true, validator: validateNickName, trigger: "change" },],
  AccountPwd: [{ required: true, validator: validatePassword, trigger: "change" },],
  UserName: [{ required: true, validator: validateUserName, trigger: "change" },],
  againNewAccountPwd: [{ required: true, validator: againNewvalidateUserName, trigger: "change" },],
  UserEmail: [{ required: true, validator: validateUserEmail, trigger: "change" },],
  UserMobile: [{ required: false, validator: validateUserMobile, trigger: "change" },],
  UserGrade: [{ required: true, validator: validateUserGrade, trigger: "change" },],
}
// 表格格式化时间格式
const formatDate = (row: any, column: any, value: any) => {
  const date = new Date(value);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

//暴露子组件的方法或者数据
defineExpose({ childFun })
</script>

<style scoped lang="less">
:deep(.el-switch.is-checked .el-switch__core) {
  border-color: #ffffff;
  background-color: #F2994A;
}

:deep(.el-table.is-scrolling-none th.el-table-fixed-column--right) {
  text-align: center;
}

.active {
  color: #F2994A;
  background: #FBFBFA;
}

.notactive {
  color: black
}





:deep(.el-form-item) {
  margin-bottom: 28px;
}

:deep(.el-form-item__label) {
  color: #595959;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

:deep(.el-overlay-dialog) {
  overflow: hidden;
}

:deep(.el-select) {
  --el-select-input-focus-border: #f3ae70;
  --el-select-input-focus-border-color: #f3ae70;
}

:deep(.el-form-item.is-error .el-input__wrapper) {
  box-shadow: 0 0 0 1px #f3ae70 inset;
}

:deep(.el-form-item__error) {
  top: 33px;
  color: #F2994A;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  width: 800px;
}

:deep(.el-col-5) {
  flex: 0
}

:deep(.el-col-19) {
  flex: 1;
  max-width: 100%;
}

:deep(.el-form-item__label) {
  align-items: center;
}

:deep(.el-button+.el-button) {
  margin-left: 0px;
}


:deep(.el-table .cell) {
  line-height: 13px;
}

:deep(.Head-container[data-v-e019f5a2] .el-icon svg) {
  color: red;
}

.tac {
  height: 760px;

  .left-container {
    border-right: 1px solid rgba(242, 242, 242, 1);
    height: 100%;
    padding-top: 12px;

    .containerUl {
      margin: 2px 0;

      .containerLl {
        display: flex;
        width: 200px;
        height: 40px;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .right-container {
    .userinfo {
      margin-top: 40px;
      margin-left: 20%;

      .avatar {
        margin-left: 20%;
        margin-bottom: 20px;
      }

      .btn {
        display: flex;
        justify-content: center;
        margin-top: 40px;

        .confirm {
          background: #F2994A;
          color: #ffffff;
          margin-left: 8px;
        }
      }

      .changepasswordDesc {
        position: absolute;
        right: -40px;
        text-align: center;
        width: 150%;
        color: #F2994A;
      }
    }

    .marg10 {
      margin-top: 64px;
    }

    .showSubMenu3 {
      position: relative;
      height: 650px;

      .addform {
        width: 93%;
        margin-left: 30px;
        margin-top: 40px;
        height: 100%;
        min-height: 200px;
      }

      .editAddform {
        width: 93%;
        margin-left: 30px;
        margin-top: 40px;
        height: 50%;
        min-height: 200px;
      }

      .btnActive {
        color: #595959;
        font-size: 14px;
        font-style: normal;
        font-weight: 350;
        line-height: 22px;
      }

      .btnActiveACT {
        color: #F2994A;
        ;
      }

      .divider {
        height: 16px;
        opacity: 0.2;
        color: #000;
        padding: 0 8px;
      }

      .btnActive:hover {
        color: #F2994A;
      }

      .tbn1 {
        width: 100%;
        margin-bottom: 0px;
        position: absolute;
        top: 670px;
        left: 85%;

        .add {
          background: #f2994a;
          color: #ffffff;
        }
      }

      .empty {
        clear: both;
        height: 0;
        font-size: 1px;
        line-height: 0px;
      }

      .adduser {
        width: 90%;
        position: absolute;
        margin: 20px 50px;
        background: #ffffff;
        top: 400px;
        z-index: 999;

        .tbn2 {
          width: 93%;
          display: flex;
          justify-content: space-between;
          border-radius: 6px;

          .btn2-child {
            width: 49%;
          }

          .btn2-child2 {
            background: #FC9030;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px;
            color: #FFF;
          }
        }
      }

      .logOut-content {
        width: 100%;
        height: 360px;

        .conttent {
          width: 100%;
          display: flex;
          height: 85%;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 22px;

          .content {
            font-weight: 900;
            padding-left: 8px;
            letter-spacing: 1px;
          }
        }

        .btn {
          background: #FBFBFA;
          height: 15%;
          display: flex;
          align-items: center;
          justify-content: end;
          padding: 0 24px;

          .btnStyle {
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
            padding: 5px 20px;
            border-radius: 6px;
          }

          .btncolor {
            background: #F2994A;
            color: #FFF;
          }
        }
      }

      .hovercolor {
        background: none;
        color: #595959;
        font-size: 14px;
      }

      .defaultColor {
        color: red;
      }

      .hovercolor:hover {
        color: #F2994A;
        background: none;
      }

      .saving-btn {
        color: #F2994A;
      }

      .cancel-btn {
        color: #F2994A;
      }

      .deleteBox {
        background: #FFF;
        border-radius: 12px;
        width: 600px;
        height: 360px;
        position: absolute;
        top: calc(50% - 180px);
        left: calc(50% - 300px);
        z-index: 999;

        .title {
          height: 15%;
          background: #FBFBFA;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
          color: #262626;
          font-family: Source Han Sans CN;
          font-size: 20px;
          font-style: normal;
          font-weight: 500;
          line-height: 28px;
        }

        .conttent {
          height: 70%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: Source Han Sans CN;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 22px;


        }

        .btn {
          display: flex;
          height: 15%;
          background: #FBFBFA;
          justify-content: flex-end;
          align-items: center;
          margin-right: 24px;

          .btnStyle {
            width: 68px;
            height: 32px;
            border-radius: 6px;
            margin-right: 8px;
          }

          .btncolor {
            background: #F2994A;
            color: #fff;
            box-shadow: 0px 4px 8px 0px rgba(147, 69, 0, 0.16), 0px 0px 2px 0px rgba(147, 69, 0, 0.05);
          }
        }
      }
    }
  }

}

.el-popconfirm {
  width: 300px;
  /* 设置弹层宽度为 300px */
  height: 200px;
  /* 设置弹层高度为 200px */
}
</style>






<style lang="scss">
.el-popconfirm {
  width: 170px;
  padding-left: 10px;
  padding-right: 30px;

  .el-popconfirm__main {
    margin: 20px 0;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
  }

  .el-popconfirm__action {
    margin: 20px 0;
    padding-bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 80px;

    // 交换 确定 和 取消 按钮的位置
    .el-button:nth-child(1) {
      color: #595959;
      border: 1px solid #E6E6E6;
      padding: 1px 10px;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      border-radius: 6px;
    }

    .el-button:nth-child(2) {
      background: #F2994A;
      border: none;
      color: #fff;
      padding: 1px 10px;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      border-radius: 6px;
      box-shadow: 0px 8px 16px 0px rgba(96, 97, 112, 0.16), 0px 2px 4px 0px rgba(40, 41, 61, 0.04);
    }
  }
}
</style>
